<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
	height: 100%;
	border: none
}
</style>

<script type="text/javascript">
function onHome(frame){
	frame.src = "frames/home.html";
}

function onContent(frame){
	frame.src= "frames/content.html";
}

function onLinks(frame){
	frame.src= "frames/links.html";
}

function onFinish(frame){
	frame.src= "frames/finish.html";
}

function onMouseOverHome(){
	var home=document.getElementById("idHome");
	home.style.backgroundColor="#CCC";
}
function onMouseOverContent(){
	var home=document.getElementById("idContent");
	home.style.backgroundColor="#CCC";
}
function onMouseOverLinks(){
		var home=document.getElementById("idLinks");
		home.style.backgroundColor="#CCC";
}
function onMouseOverFinish(){
		var home=document.getElementById("idFinish");
		home.style.backgroundColor="#CCC";
}

function onMouseOutHome(){
		var finish=document.getElementById("idHome");
		finish.style.backgroundColor="#FFF"	
}

function onMouseOutContent(){
	var finish=document.getElementById("idContent");
	finish.style.backgroundColor="#FFF"	
	}
function onMouseOutLinks(){
	var finish=document.getElementById("idLinks");
	finish.style.backgroundColor="#FFF"	
	}
function onMouseOutFinish(){
	var finish=document.getElementById("idFinish");
	finish.style.backgroundColor="#FFF"	
	}
</script>
</head>
<body>
<table id="tabel_head" style="height: 100%; width: 100%;">
	<tr>
		<td style="height: 25%; border: 1px red solid;">HEAD</td>
	</tr>
	<tr>
		<td style="height: 65%">

		<table id="tabel_body" style="height: 100%; width: 100%;">
			<tr style="border: 1px red solid;">
				<td style="width: 15%; height: 100%; border: 1px black solid;">
				<table>
					<tr>
						<td id="idHome" onmouseover="onMouseOverHome()"
							onmouseout="onMouseOutHome()"><a href="#"
							onclick="onHome(document.getElementById('frame_1'))">Home</a></td>
					</tr>
					<tr>
						<td id="idContent"><a href="#"
							onclick="onContent(document.getElementById('frame_1'))"
							onmouseover="onMouseOverContent()"
							onmouseout="onMouseOutContent()">Content</a></td>
					</tr>
					<tr>
						<td id="idLinks"><a href="#"
							onclick="onLinks(document.getElementById('frame_1'))"
							onmouseover="onMouseOverLinks()" onmouseout="onMouseOutLinks()">Links</a></td>
					</tr>
					<tr>
						<td id="idFinish"><a href="#"
							onclick="onFinish(document.getElementById('frame_1'))"
							onmouseover="onMouseOverFinish()" onmouseout="onMouseOutFinish()">Finish</a></td>
					</tr>
				</table>
				</td>
				<td style="width: 85%; height: 100%; border: 1px black solid;">
				<iframe id="frame_1" style="width: 100%; height: 100%;"
					frameborder="0" src="http://www.google.com"></iframe></td>
			</tr>
		</table>

		</td>
	</tr>
</table>
</body>
</html>